<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='https://cdn.staticfile.org/react/16.4.0/umd/react.development.js'></script>
    <script src='https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js'></script>
    <!-- 生产环境中不建议使用 -->
    <script src='https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js'></script>
    <!-- PropTypes文件 -->
    <script src="https://unpkg.com/prop-types@15.6.2/prop-types.js"></script>
</head>

<body>
    <div id='app'>
    </div>
    <script type='text/babel'>
        /*
            在真实的开发中，我们很多时候要对于参数是否为必填项以及数据类型进行一个约束，防止出现不必要的麻烦，那么react给我们提供了哪些做限制的方法呢？我们一起来看一下
        */
        class Person extends React.Component{

            render(){
                const {name,age,sex,speak} = this.props
                console.log(this.props);
                return (
                    <ul>
                        <li>姓名: {name}</li>
                        <li>性别: {sex}</li>
                        <li>年龄: {age+1}</li>
                    </ul>
                )
            }
        }

        /*
            从react16开始，PropTypes被单独分离成了一个js文件。使用方法也很简单：
                组件名称.propTypes = { 属性1:PropTypes.类型.是否必须 }
                注意为了作区分，类型都是小写字母开头比如string,number...，其中函数为func，如果必须则要.isRequired，不是必须则无需添加这一句。
            不过有一个要注意的，就算你加入了类型限制，你传入不正确的数据，react也依然会把错误的数据渲染到页面上，因为react要保证页面的基本正常显示，只不过会在控制台报错给你，方便开发者及时的排查。
        */ 
        Person.propTypes = {
            name:PropTypes.string.isRequired,//比如这个例子就是对于name进行了字符串类型以及必填项的限制
            age:PropTypes.number,
            sex:PropTypes.string,//
            speak:PropTypes.func//限制speak为必须为函数类型
        }

        /*
            默认值的使用也很简单，和类型限制用法类似。
                组件名称.defaultProps = { 属性名:默认值,... }即可       
        */
        Person.defaultProps = {
            sex:'保密',
            age:100
        }

        function speak(){
            console.log('啦啦啦啦啦')
        }

        const p1 = {name:'刘康',sex:'女',age:23,speak}
        let app = document.getElementById('app')
        ReactDOM.render(<Person {...p1}/>,app)
    </script>
</body>

</html>